<template>
  <el-container class="main_con">
    <div class="filter_con ds_block nopt">
      <!-- <div class="button_area">
        <el-button type="primary" @click="adduser">新增用户</el-button>
      </div>-->
      <div class="filter_area">
        <el-input v-model="params.nickname" size="medium" class="serach_input mr_15 mt_15" placeholder="用户昵称" style="width:250px;"></el-input>
        <el-input v-model="params.mobile" size="medium" class="serach_input mr_15 mt_15" placeholder="手机号码" style="width:250px;"></el-input>
        <date-picker @change="gettime" size="medium" class="mr_15 mt_15"></date-picker>
        <el-button @click="search" size="medium">搜索</el-button>
      </div>
    </div>
    <div class="list_con">
      <el-table @selection-change="SelectHadnle" :data="list" element-loading-text fit highlight-current-row>
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column prop="id" width="120" label="ID"></el-table-column>
        <el-table-column prop="picurl" label="用户">
          <template slot-scope="scope">
            <div class="user">
              <div class="face"><vimage :src="scope.row.picurl" style="width:50px;height:50px;display:block;border-radius:50%;"></vimage></div>
              <div class="info">
                <div class="name" :title="scope.row.nickname">{{ scope.row.nickname }}</div>
                <div class="source">
                  <i v-if="scope.row.type == 1" class="weixin el-sc-xiaochengxu"></i>
                  <i v-if="scope.row.type == 2" class="weixin el-sc-weixin4"></i>
                  <i v-if="scope.row.type == 3" class="weixin el-sc-h5"></i>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="余额">
          <template slot-scope="scope">
            <span v-if="scope.row.cash">{{ scope.row.cash.total }}</span>
          </template>
        </el-table-column>
        <el-table-column label="积分">
          <template slot-scope="scope">
            <span v-if="scope.row.cash">{{ scope.row.cash.integral }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="name" label="用户名"></el-table-column> -->
        <!-- <el-table-column prop="nickname" label="昵称"></el-table-column> -->
        <el-table-column prop="mobile" label="联系号码"></el-table-column>
        <el-table-column prop="status_text" label="状态"></el-table-column>
        <el-table-column prop="create_time" label="注册时间"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!--  <el-button type="text" @click="EditHandle(scope.row.id)">编辑</el-button> -->
            <el-button v-has type="text" @click="toUserInfo(scope.row.id)">详情</el-button>
            <el-button v-has type="text" @click="EnableHandle(scope.row)">{{ scope.row.status == 1 ? '禁用' : '启用' }}</el-button>
            <!-- <el-button type="text" @click="handleClose(scope.row.id)">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <div class="table_footer">
        <el-pagination @current-change="ChangeCurrent" :page-size="size" :page-count="page" class="pages" background layout="prev, pager, next" :total="total"></el-pagination>
      </div>
    </div>
    <!-- <el-drawer class="w_80" title="编辑用户" :visible.sync="drawer" :direction="direction">
      <edituser @on-close="beClose" :uid='user_id' :user_type="user_type"></edituser>
    </el-drawer>-->
    <el-dialog :title="user_type == 'add' ? '新增用户' : '编辑用户'" :visible.sync="drawer" destroy-on-close width="500px">
      <edituser @on-close="beClose" :uid="user_id" :user_type="user_type"></edituser>
    </el-dialog>
  </el-container>
</template>

<script>
import {mapGetters} from 'vuex';
import {getuserlist, deladminuser, editadminuser} from '@/api/mall/user';
import Edituser from './components/Edituser';
import DatePicker from '@/components/DatePicker/index';
import {fitter_keyword} from '@/utils/index';
export default {
  data() {
    return {
      params: {
        nickname: '',
        //name: "",
        mobile: '',
        begin_date: '',
        end_date: ''
      },
      paramsdf: {},
      page: 1,
      size: 10,
      total: 0,
      listLoading: true,
      list: [],
      drawer: false,
      direction: 'rtl',
      user_id: '',
      user_type: 'add',
      selectionData: []
    };
  },
  components: {
    Edituser,
    DatePicker
  },
  computed: {
    ...mapGetters(['allroleslist'])
  },
  mounted() {
    this.getlist();
  },
  filters: {
    filter_role(s, list) {
      var d = list.filter(a => {
        return a.id == s;
      });
      if (d.length > 0) {
        return d[0].name;
      } else {
        return '没有该角色';
      }
    }
  },
  methods: {
    //用户详情
    toUserInfo(id) {
      this.$router.push({
        path: '/user/item',
        query: {
          id: id,
          k: Math.random()
        }
      });
    },
    search() {
      this.page = 1;
      this.paramsdf = fitter_keyword(this.params);
      this.getlist();
    },
    //启用，禁用
    EnableHandle(data) {
      let _this = this;
      let status = data.status;
      this.$confirm(status != 1 ? '确认启用？' : '确认禁用？')
        .then(_ => {
          let params = data;
          delete params.status_text;
          delete params.mobile
          params.status = status == 1 ? 2 : 1;
          editadminuser(params).then(res => {
            _this.getlist();
          });
        })
        .catch(_ => {});
    },
    //选择
    SelectHadnle(selection) {
      this.selectionData = selection;
    },
    //删除
    handleClose(id) {
      let _this = this;
      this.$confirm('确认删除？')
        .then(_ => {
          let data = {
            id: id
          };
          deladminuser(data).then(res => {
            _this.getlist();
          });
        })
        .catch(_ => {});
    },
    //新增
    adduser() {
      this.user_type = 'add';
      this.drawer = true;
      this.user_id = -1;
    },
    //编辑
    EditHandle(id) {
      this.user_id = id;
      this.user_type = 'edit';
      this.drawer = true;
    },
    //编辑完成
    beClose() {
      (this.drawer = false), this.getlist();
    },
    //获取列表
    getlist() {
      this.listLoading = true;
      var data = this.params;
      getuserlist(this.page, data, this.size).then(res => {
        var jsondata = res.msg;
        this.list = jsondata.data;
        this.total = jsondata.total;
        // this.list = response.data.items
        console.log(res);
      });
    },
    //获取时间
    gettime(value) {
      this.params.begin_date = value[0];
      this.params.end_date = value[1];
    },
    //切换页码
    ChangeCurrent(page) {
      this.page = page;
      this.getlist();
    }
  }
};
</script>

<style lang="scss" scoped>
.user {
  display: flex;

  .info {
    display: flex;
    flex-direction: column;
    margin-left: 10px;

    .name {
      display: -webkit-box; /*作为弹性伸缩盒子模型显示*/
      -webkit-line-clamp: 1; /*显示的行数；如果要设置2行加...则设置为2*/
      overflow: hidden; /*超出的文本隐藏*/
      text-overflow: 'ellipsis'; /* 溢出用省略号*/
      -webkit-box-orient: vertical; /*伸缩盒子的子元素排列：从上到下*/
      margin-bottom: 5px;
    }

    .source {
      .weixin {
        font-size: 18px;
        color: #333333;
      }
    }
  }
}
</style>
